<script setup lang="ts">
// 定义组件名
defineOptions({
    name: 'RegisterPage'
})

import { registerByCodeAPI, sendMSMCode } from '@/apis/user';
import { RulesCodes, RulesMobile, RulesPassword } from '@/utils/rules';
import { type FormInstance, showFailToast, showToast } from 'vant';
import { onUnmounted, ref } from 'vue';
import router from '@/router'

//定义响应式数据
const mobile = ref('')
const password = ref('')
//是否勾选
const isAgree = ref(false)

//表单提交时
const onSubmit = async (val: object) => {
    //如果用户没有勾选我同意  代码要停止执行
    if (!isAgree.value) return showFailToast('请勾选我同意')
    await registerByCodeAPI(mobile.value, code.value, password.value)
    showToast('注册成功')
    router.push('/login')

}
const formRef = ref<FormInstance>()
//发送短信验证码
const time = ref(0)
let timerId: number
const onSend = async () => {
    //处理是否已经在发送短信验证码
    if (time.value > 0) return
    //校验是否输入了收集号码
    await formRef.value?.validate('mobile')
    //发送短信验证码
    const res = await sendMSMCode(mobile.value, 'register')
    //显示验证码
    showToast({
        message: res.data.code,
        duration: 5000
    })
    //处理倒计时
    time.value = 60
    if (timerId) clearInterval(timerId)
    //开启定时器函数
    timerId = setInterval(() => {
        time.value--
        if (time.value <= 0) {
            clearInterval(timerId)
        }
    }, 1000)
}

onUnmounted(() => {
    //清除定时器
    clearInterval(timerId)
})

const code = ref('')
const isShow = ref(false)
</script>

<template>
    <div class="login-page">
        <cp-nav-bar right-text="登录" @click-right="router.push('/login')"></cp-nav-bar>
        <!-- 头部 -->
        <div class="login-head">
            <h3>注册</h3>
        </div>
        <!-- 表单 -->
        <van-form autocomplete="off" @submit="onSubmit" ref="formRef">
            <van-field placeholder="请输入手机号" type="tel" name="mobile" v-model="mobile" :rules="RulesMobile"></van-field>
            <van-field placeholder="请输入验证码" name="code" v-model="code" :rules="RulesCodes">
                <template #button>
                    <span class="btn-send" @click="onSend" :class="{ active: time > 0 }">{{ time > 0 ? `${time}秒后发送验证码`
                        : '发送验证码'
                        }}</span>
                </template>
            </van-field>
            <van-field placeholder="请输入密码" :type="isShow ? 'text' : 'password'" name="password" v-model="password"
                :rules="RulesPassword">
                <template #button>
                    <cp-icon @click="isShow = !isShow" :name="`${isShow ? 'login-eye-on' : 'login-eye-off'}`"
                        class="icon-eye"></cp-icon>
                </template>
            </van-field>
            <div class="cp-cell">
                <van-checkbox v-model="isAgree">
                    <span>我已同意</span>
                    <a href="javascript:;">用户协议</a>
                    <span>及</span>
                    <a href="javascript:;">隐私条款</a>
                </van-checkbox>
            </div>
            <div class="cp-cell">
                <van-button block round type="primary" native-type="submit">注 册</van-button>
            </div>
            <div class="cp-cell">
                <a href="javascript:;">忘记密码？</a>
            </div>
        </van-form>
        <!-- 底部 -->
    </div>
</template>

<style lang="scss" scoped>
.login {
    &-page {
        padding-top: 46px;
    }

    &-head {
        display: flex;
        padding: 30px 30px 50px;
        justify-content: space-between;
        align-items: flex-end;
        line-height: 1;

        h3 {
            font-weight: normal;
            font-size: 24px;
        }

        a {
            font-size: 15px;
        }
    }

    &-other {
        margin-top: 60px;
        padding: 0 30px;

        .icon {
            display: flex;
            justify-content: center;

            img {
                width: 36px;
                height: 36px;
                padding: 4px;
            }
        }
    }
}

.van-form {
    padding: 0 14px;

    .icon-eye {
        margin-right: 10px;
    }

    .cp-cell {
        height: 52px;
        line-height: 24px;
        padding: 14px 16px;
        box-sizing: border-box;
        display: flex;
        align-items: center;

        .van-checkbox {
            a {
                color: var(--cp-primary);
                padding: 0 5px;
            }
        }
    }

    .btn-send {
        color: var(--cp-primary);

        &.active {
            color: rgba(22, 194, 163, 0.5);
        }
    }
}
</style>